<template>

  <div class="left" v-if="leftShow">
    <MenuPanel :pickedTilesetInfo="pickedTilesetInfo" @view-properties="handleViewProperties"
      @view-details="handleViewDetails" @tile-hide="handleHide" @tile-show="handleShow" />
  </div>
  <div class="right" v-if="attrShow">
    <AttrView :pickedTilesetInfo="pickedTilesetInfo" />
  </div>
  <IframeModal :url="modalUrl" :visible="modalVisible" @close="modalVisible = false" />
</template>
<script setup lang='ts'>
import { onBeforeMount, ref, watch } from 'vue'
import MenuPanel from './MenuPanel.vue';
import AttrView from './AttrView.vue';
import { getobjm, getSceneObj, getPickedTilesetInfo } from '../scripts/getobjm';
import IframeModal from './IframeModal.vue';

const objm = getobjm()
const leftShow = ref(false)
const attrShow = ref(false)
const modalVisible = ref(false);
const modalUrl = ref('');

const es3DTileset = getSceneObj(objm, "bim-model1")
const pickedTilesetInfo = getPickedTilesetInfo()
es3DTileset.setFeatureColor("id", [{
  value: pickedTilesetInfo.id,
  rgba: [1, 0, 0, 1],
}])

const handleViewProperties = () => {
  const currentCameraInfo = objm.activeViewer?.getCurrentCameraInfo()
  console.log('当前相机位置', currentCameraInfo)
  attrShow.value = true
};

const handleViewDetails = () => {
  attrShow.value = false
  showModal("./detail.png");
  // 这里可以添加查看详情的逻辑
};

const handleHide = () => {
  attrShow.value = false
};

const handleShow = () => {
  attrShow.value = false
};

const showModal = (url: string) => {
  modalUrl.value = url;
  modalVisible.value = true;
};

onBeforeMount(() => {
  const es3DTileset = getSceneObj(objm, "bim-model1")
  if (es3DTileset)
    es3DTileset.resetFeatureStyle()
  const esWidget = getSceneObj(objm, 'esWidget1')
  //  console.log('eswidget', esWidget)
  if (esWidget)
    esWidget.show = false

  pickedTilesetInfo.value = undefined
})

watch(pickedTilesetInfo, (newInfo, oldInfo) => {
  console.log('Feature ID changed:', newInfo);

  // 根据业务逻辑控制显示/隐藏
  leftShow.value = newInfo !== null && newInfo !== undefined;
  if (!leftShow.value) {
    attrShow.value = false
  }
}, { immediate: true }); // immediate: true 会立即执行一次
</script>


<style scoped>
.left {
  position: absolute;
  box-sizing: border-box;
  left: 0;
  top: 70px;
  width: 330px;
  height: 70%;
  background: #153651;
  border-radius: 8px;
  padding: 20px;
  color: #d6deea;
  border: 1px solid #939e8f;
  animation-name: enter;
  animation-duration: 0.1s;
  animation-fill-mode: forwards;
  animation-delay: 0.3s;
}

.right {
  position: absolute;
  box-sizing: border-box;
  right: 0;
  top: 70px;
  width: 330px;
  height: 70%;
  background: #153651;
  border-radius: 8px;
  padding: 20px;
  color: #d6deea;
  border: 1px solid #939e8f;
  animation-name: enter;
  animation-duration: 0.1s;
  animation-fill-mode: forwards;
  animation-delay: 0.3s;
}
</style>
